<link rel="stylesheet" href="<%= basePath %>/lib/sui.min.css">
<link rel="stylesheet" href="<%= basePath %>/lib/sui-append.min.css">
<link rel="stylesheet" href="<%= basePath %>/public/iconfont/iconfont.css">
<link rel="stylesheet" href="<%= basePath %>/public/css/style.css">
<link rel="stylesheet" href="<%= basePath %>/public/css/reset.css">
<link rel="stylesheet" href="<%= basePath %>/modules/leader/css/style.css">

<script type="application/javascript" src="<%= basePath %>/lib/jquery.min.js"></script>
<script type="application/javascript" src="<%= basePath %>/lib/sui.min.js"></script>
<script type="application/javascript" src="<%= basePath %>/lib/underscore-min.js"></script>
<script type="application/javascript" src="<%= basePath %>/public/js/util.js"></script>
<script type="application/javascript" src="/public/js/ui.js"></script>
<script type="application/javascript" src="<%= basePath %>/modules/leader/js/leader.js"></script>
<script type="application/javascript" src="<%= basePath %>/modules/leader/js/query.js"></script>

<div class="body_scroll">
    <div class="frame-content">
        <ul class="info_list">
            <li class="li_info">
                <span class="iconfont" style="color: #5396f1; float: left">&#xe61f;</span>
                <form class="sui-form form-horizontal" style="float: left; margin: 0">
                    <div class="control-group" style="margin: 0">
                        <span style="font-size: 14px">日期：</span>

                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" class="input-query-time date_input_top" style="width: 110px">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                        <span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;班级：</span>
                        <span class="sui-dropdown dropdown-bordered table_header select">
                                    <span class="dropdown-inner">
                                    <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="status_select">
                                        <input type="hidden" value="0" class="select-class" id="teacher_search_status"><i class="caret"></i><span>全部</span>
                                    </a>
                                    <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu menu-classes">
                                        <li role="presentation"><a role="menuitem" tabindex="-1" value="0">全部</a></li>
                                        <% grades.forEach(function(grade) {
                                                grade.natureClasses.forEach(function(natureClass) {
                                        %>
                                        <li role="presentation">
                                            <a role="menuitem" data-show="class_all" data-grade="<%=grade.id%>" tabindex="-1" value="<%=natureClass.id%>"><%=natureClass.name%></a>
                                        </li>
                                        <%
                                            });
                                        });
                                        %>
                                    </ul>
                                    </span>
                                </span>
                            </div>
                        </form>
                <a class="btn-search sui-btn btn-primary table_header search_button" style="float: none; margin-left: 10px">查询</a>
                        <div style="clear:both;"></div>
                    </li>
                    <li class="li_footer">
                        <table class="sui-table table-zebra attend_table leader_table_body table-bordered">
                            <thead>
                            <tr>
                                <th>班级</th>
                                <th>天数</th>
                                <th>应到</th>
                                <th>迟到</th>
                                <th>早退</th>
                                <th>旷课</th>
                                <th>请假</th>
                                <th>详情</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <%
                                classes.forEach(function(natureClass) {
                                    var statisticsList = natureClass.statisticsList;
                                    var totalStatistics = natureClass.totalStatistics;
                                    var totalAttendence = totalStatistics.attendCount + totalStatistics.totalAbsence;
                                    var attendPercent = 0;
                                    if (totalAttendence > 0) {
                                        attendPercent = totalStatistics.attendCount / totalAttendence;
                                    }
                                %>
                                <td><%= natureClass.name %></td>
                                <td><%= statisticsList.length %></td>
                                <td><%= totalAttendence %></td>
                                <td><%= totalStatistics.lateCount %></td>
                                <td><%= totalStatistics.earlyCount %></td>
                                <td><%= totalStatistics.absenceCount %></td>
                                <td><%= totalStatistics.restCount %></td>
                                <td class="attend_table_detail" data-id="<%= natureClass.id %>"
                                    onclick="tableDetailButtonClicked(event)">详细 <i
                                            class="iconfont icon-arrow-down attend_table_detail_arrow"></i></td>
                            </tr>
                            <tr data-id="attend_detail_area<%= natureClass.id %>" class="table_detail_content_hide">
                                <td colspan="10" data-id="attend_detail_content<%= natureClass.id %>"
                                    class="table_detail_background" style="height: 0; line-height: 0">
                                    <% if (natureClass.attendances.length > 0) {%>
                                    <table class="sui-table table-bordered table-zebra">
                                        <tbody>
                                        <tr>
                                            <td>学号</td>
                                            <td>姓名</td>
                                            <td colspan="2">上午</td>
                                            <td colspan="2">下午</td>
                                            <td colspan="2">晚上</td>
                                        </tr>
                                        <% natureClass.attendances.forEach(function(attendance) { %>
                                        <tr>
                                            <td><%=attendance.student.sid%></td>
                                            <td><%=attendance.student.name%></td>
                                            <% attendance.values.forEach(function(value) { %>
                                            <td><%=AttendanceDescriptions.get(value.enterStatus)%></td>
                                            <td><%=AttendanceDescriptions.get(value.exitStatus)%></td>
                                            <% }); %>
                                        </tr>
                                        <%});%>
                                        </tbody>
                                    </table>
                                    <% } else { %>
                                    <p style="text-align: center; font-size: 18px; line-height: 20px">暂无详细</p>
                                    <% }%>
                                </td>
                            </tr>
                            <tr style="display: none"></tr>
                            <% }); %>
                            </tbody>
                        </table>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        var dateInput = $('.input-query-time.date_input_top');
        dateInput.change(function () {
            if (!dateInput.val()) {
                dateInput.datepicker('update', new Date());
            }
        });
    });
</script>
